<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="queryForm.resourceTypeId" placeholder="请选择" clearable >
          <el-option v-for="item in resourceTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadResourceList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveResource(null)">添加资源</el-button>
    </div>
  
    <el-table :data="resourceList" stripe>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="resourceTypeName" label="分类名称" />
      <el-table-column prop="url" label="路径" />
      <el-table-column prop="description" label="描述" />
  

      <el-table-column label="状态" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.status == '0' }">
            {{ scope.row.status == '0' ? '禁用' : '启用' }}
          </div>
        </template>
      </el-table-column>
 

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveResource(scope.row.id)">编辑</el-button>

          <el-button size="small" type="danger" @click="handleUpdateStatus(scope.row.id,scope.row.status==1?'inactive':'active')">
            {{ scope.row.status == '1' ? '禁用' : '启用' }}
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref} from "vue";
import { useRouter } from "vue-router";
import {getResourceList,updateStatus} from  "@/api/resource"
import {getResourceTypeList} from "@/api/resourceType"
import {ElMessageBox} from "element-plus";

const router = useRouter();

const queryForm=reactive({name:null,resourceTypeId:null,page:1,pageSize:10});

let resourceList=reactive([]);
let resourceTypeList=reactive([]);

let total=ref(0);


//加载全部资源分类
getResourceTypeList().then((resp)=>{
  resourceTypeList.push(... resp.data);
});

let handleSaveResource=(resourceId)=>{
  if(resourceId){
    //编辑
    router.push({ path: '/resource/save',query:{resourceId:resourceId}})
  }else{
    //添加
    router.push({ path: '/resource/save'})
  }
}


//更新状态
let handleUpdateStatus=(resourceId,status)=>{
  //确认对话框
  ElMessageBox.confirm(
      "是否修改状态?",
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    updateStatus(resourceId,status).then(resp=>{
      loadResourceList()
    })
  }).catch(()=>{
  })
}

//定义方法
let loadResourceList=()=>{
  //准备数据
  getResourceList(queryForm).then((resp)=>{
    resourceList.length = 0;
    resourceList.push(... resp.data);

    total.value=resp.total;
  });
}

let handleSizeChange=(pageSize)=>{
  queryForm.pageSize = pageSize;
  loadResourceList()
}

let handlePageChange=(page)=>{
  queryForm.page = page;
  loadResourceList();
}

loadResourceList();
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
